<script>
import {Calendar, FolderChecked, Management, User} from "@element-plus/icons-vue";

export default {
  name: "LeftMenu",
  components: {Management, FolderChecked, Calendar, User},
  props: {
    menuItems: {
      type: Array,
      default: () => [],
      required: true,
    },
    value: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      selectedItem: this.value,
    };
  },
  methods: {
    handleMenuSelect(index, indexPath, item, routeResult) {
      // 获取 Proxy 对象的原始数据
      const originalData = Object.assign({}, indexPath);

      // 将原始数据转换为数组
      const dataArray = Object.values(originalData);

      this.$emit("select", dataArray);
    },
  },
}
</script>

<template>
  <div class="left-menu">
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color = 'rgb(2, 133, 189)'
        text-color = 'rgb(255, 255, 255)'
        active-text-color = 'rgb(255,240,2)'
        @select="handleMenuSelect"
    >
      <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
        <el-icon class="left-menu-icon"><component :is="item.icon" /></el-icon>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.left-menu {
  height: 100%;
  width: 100%;
}

.el-menu-vertical-demo {
  position: absolute;
  width: 100%;
  border: none;
  top: 5%;
}

el-menu-item {
  height: 9%;
}

.left-menu-icon {
  width: 1em;
  height: 1em;
  margin-right: 8px
}

span {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 500;
}

</style>